<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 1px solid #eee;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="600" height="300"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const A = 120;
    const lineLength = 500;
    const phi_deg = 30;
    const phi_rad = phi_deg * Math.PI / 180;
    const pointRadius = 3.5;
    const tubeHalfLength = 220;
    const tubeSeparation = 3;

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.2;
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Draw horizontal line MN
    ctx.beginPath();
    ctx.moveTo(cx - lineLength / 2, cy);
    ctx.lineTo(cx + lineLength / 2, cy);
    ctx.stroke();

    // Draw the inclined tube (two parallel lines)
    const cos_phi = Math.cos(phi_rad);
    const sin_phi = Math.sin(phi_rad);
    
    // The offset vector perpendicular to the tube's direction
    // Tube direction vector in canvas coordinates is (cos_phi, -sin_phi)
    // Perpendicular vector is (sin_phi, cos_phi)
    const dx = tubeSeparation * sin_phi;
    const dy = tubeSeparation * cos_phi;

    // Line 1
    ctx.beginPath();
    const x1_start = cx + tubeHalfLength * cos_phi - dx;
    const y1_start = cy - tubeHalfLength * sin_phi - dy;
    const x1_end = cx - tubeHalfLength * cos_phi - dx;
    const y1_end = cy + tubeHalfLength * sin_phi - dy;
    ctx.moveTo(x1_start, y1_start);
    ctx.lineTo(x1_end, y1_end);
    ctx.stroke();

    // Line 2
    ctx.beginPath();
    const x2_start = cx + tubeHalfLength * cos_phi + dx;
    const y2_start = cy - tubeHalfLength * sin_phi + dy;
    const x2_end = cx - tubeHalfLength * cos_phi + dx;
    const y2_end = cy + tubeHalfLength * sin_phi + dy;
    ctx.moveTo(x2_start, y2_start);
    ctx.lineTo(x2_end, y2_end);
    ctx.stroke();

    // Draw the points
    function drawPoint(x, y) {
      ctx.beginPath();
      ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
      ctx.fill();
    }
    
    // Point O at the origin
    drawPoint(cx, cy);
    
    // Left fixed charge Q
    drawPoint(cx - A, cy);

    // Right fixed charge Q
    drawPoint(cx + A, cy);

    // Draw the angle arc for phi
    const arcRadius = 55;
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, 0, -phi_rad, false);
    ctx.stroke();

    // Draw labels
    ctx.fillStyle = 'black';

    // M and N
    ctx.fillText('M', cx - lineLength / 2 - 25, cy + 5);
    ctx.fillText('N', cx + lineLength / 2 + 25, cy + 5);

    // Q charges
    // The 'Q' in the image is stylized. We use a standard italic Q.
    ctx.fillText('Q', cx - A, cy - 20);
    ctx.fillText('Q', cx + A, cy - 20);
    
    // O (origin)
    ctx.fillText('O', cx + 10, cy + 22);

    // A (distances)
    ctx.fillText('A', cx - A / 2, cy - 20);
    ctx.fillText('A', cx + A / 2, cy + 22);
    
    // m, q (particle properties)
    ctx.fillText('m, q', cx - 65, cy - 50);
    
    // φ (angle)
    ctx.fillText('φ', cx + 40, cy - 20);

  </script>
</body>
</html>